<template>
  <div class="project-setting">
    <a-button class="btn-back" type="primary" @click="$emit('back')">返回</a-button>
    <a-tabs :defaultActiveKey="tabIndex" @change="changeTab">
      <a-tab-pane tab="项目设置" key="1">
        <a-card title="基本信息">
          <a-form :form="form1">
            <a-form-item label="负责人">{{projectInfoData.createOper}}</a-form-item>
            <a-form-item label="创建日期">{{projectInfoData.createTime}}</a-form-item>
            <a-form-item label='项目名称'>
              <a-input placeholder="请输入项目名称" v-decorator="['projectName',{initialValue: projectInfoData.projectName, rules: [{ required: true, message: '项目名称不能为空'}]}]"/>
            </a-form-item>
            <a-form-item label='项目代码'>
              <a-input placeholder="请输入项目代码" v-decorator="['projectCode',{initialValue: projectInfoData.projectCode,rules: [{ required: true, message: '项目代码不能为空'}]}]"/>
            </a-form-item>
            <a-form-item label='项目描述'>
              <a-textarea style="width:300px;" v-decorator="['projectDesc',{initialValue: projectInfoData.description}]" placeholder="请输入项目描述" :rows="4"></a-textarea>
            </a-form-item>
            <a-form-item label=''>
              <a-button type="primary" @click="handleSubmit">保存</a-button>
            </a-form-item>
          </a-form>
        </a-card>
        <a-card title="删除项目">
          <div class="btn-remove-wrap">
            <span><a-icon class="icon-tips" type="warning" />项目删除后就再也不可恢复了，请谨慎操作！</span>
            <a-button type="danger" @click="removeData.show=true">删除</a-button>
          </div>
        </a-card>
        <a-card title="转让项目">
          <div class="btn-remove-wrap">
            <span><a-icon class="icon-tips" type="warning" />项目转让后就再也不可恢复了，请谨慎操作！</span>
            <a-button type="danger" @click="giveData.show=true">转让</a-button>
          </div>
        </a-card>
      </a-tab-pane>
      <a-tab-pane tab="成员管理" key="2">
        <member-manage v-if="tabIndex==='2'" :projectInfoData="projectInfoData"></member-manage>
      </a-tab-pane>
      <a-tab-pane tab="临时表清理" key="3">
        <a-card title="临时表保存天数">
          <div class="btn-remove-wrap">
            <a-input-number :min="1" style="width: 260px" @change="onChangeNum" />
            <!-- <a-input style="width: 260px" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" v-model="days" placeholder="请设置临时表保存天数"/> -->
            <a-button type="primary" @click="saveDays">保存</a-button>
          </div>
        </a-card>
        <a-card title="清理以下日期之前的临时表">
          <div class="btn-remove-wrap">
            <a-date-picker style="width: 260px" placeholder="请选择日期" @change="onChange"/>
            <a-button type="primary" @click="saveTime">保存</a-button>
          </div>
        </a-card>
      </a-tab-pane>
    </a-tabs>
    <give-tips @confirm="giveConfirm" :giveData="giveData"></give-tips>
    <remove-tips @confirm="removeConfirm" :removeData="removeData"></remove-tips>
  </div>
</template>
<script>
import MemberManage from './Member'
import GiveTips from './GiveTips'
import RemoveTips from './RemoveTips'
export default {
  name: 'ProjectEdit',
  components: { MemberManage, GiveTips, RemoveTips },
  props: {
    roleEditVisiable: {
      default: false
    },
    projectInfoData: {
      require: true
    }
  },
  data () {
    return {
      user: JSON.parse(localStorage.getItem('USER')).username,
      tabIndex: '1',
      days: '',
      time: '',
      giveData: {
        show: false,
        userList: []
      },
      removeData: {
        show: false
      },
      loading: false,
      form1: this.$form.createForm(this),
      form2: this.$form.createForm(this)
    }
  },
  watch: {
    tabIndex (val) {
      if (val === '1') {
        this.init()
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.$post('member/list', {projectId: this.projectInfoData.projectId}, true).then((r) => {
        this.giveData.userList = r.data.data.rows.filter(v => v.memberUser !== this.user)
      })
    },
    onChangeNum (val) {
      this.days = val
    },
    onChange (date) {
      this.time = date
    },
    saveDays () {
      if (this.days) {
        this.$post(`project/timingClearTemporaryTable/${this.days}`, {}, true).then((r) => {
          if (r.data.success) {
            this.$message.success('保存成功')
          }
        })
      } else {
        this.$message.error('请先设置天数')
      }
    },
    saveTime () {
      if (this.time) {
        const params = {
          clearDate: this.$moment(this.time).format('YYYY-MM-DD HH:mm:ss')
        }
        this.$post('project/clearTemporaryTable', params, true).then((r) => {
          if (r.data.success) {
            this.$message.success('保存成功')
          }
        })
      } else {
        this.$message.error('请先设置日期')
      }
    },
    changeTab (val) {
      this.tabIndex = val
    },
    giveConfirm (value) {
      this.loading = true
      this.$post('member/changeProjectOwner', {
        projectId: this.projectInfoData.projectId,
        dstOwner: value
      }, true).then((r) => {
        this.giveData.show = false
        this.$message.success('转让项目成功')
        this.$emit('init')
      }).catch(() => {
        this.loading = false
      })
    },
    removeConfirm () {
      this.loading = true
      this.$post('project/delete', {
        projectId: this.projectInfoData.projectId
      }, true).then((r) => {
        this.removeData.show = false
        this.$message.success('删除项目成功')
        this.$emit('init')
      }).catch(() => {
        this.loading = false
      })
    },
    reset () {
      this.loading = false
      this.form.resetFields()
    },
    onClose () {
      this.reset()
      this.$emit('close')
    },
    handleSubmit () {
      this.form1.validateFields((err, values) => {
        if (!err) {
          this.loading = true
          values.projectId = this.projectInfoData.projectId
          values.cacheExpireDays = this.projectInfoData.cacheExpireDays
          this.$post('project/update', values, true).then((r) => {
            this.$message.success('修改项目成功')
            this.$emit('init')
          }).catch(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .project-setting {
    position: relative;
    .ant-form-item {
      display: flex;
      .ant-input {
        width: 260px;
      }
    }
    .icon-tips {
      margin-right: 5px;
      font-size: 20px;
      color: #cf1322;
    }
    .btn-remove-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .ant-card {
      margin-bottom: 10px;
    }
    .btn-back {
      position: absolute;
      right: 0px;
      top: 6px;
      z-index: 1;
    }
  }
</style>
